import React, { useContext, useEffect } from "react";
import { NavLink, Outlet, useLocation } from "react-router-dom";
import { AuthContext } from "../../contexts/authContext"
import { Articles } from "../../components/Articles/Articles";
export const Ios = (props) => {
  const { pathname } = useLocation()

  const { state, dispatch } = useContext(AuthContext)
  useEffect(() => {
    dispatch({ category_id: state.category_id })
  }, [])
  return (
    <>
      <ul className="backend-container" >
        {
          state.categories[4]?.children ? state.categories[4]?.children.map((item) => {
            return (
              <li key={item.category_id}
                onClick={() => dispatch({ category_id: item.category_id })}
              >
                <NavLink style={{ textDecoration: 'none' }} to={item.category_name} >{item?.category_name}</NavLink>
              </li>
            )
          }) : ""
        }
      </ul>
      {
        pathname == "/ios" ? <Articles /> : <Outlet />
      }
    </>
  )
}

